import 'package:flutter/material.dart';
import '/components/page/common.dart';
import '/components/list/route_menu_item.dart';
import '/components/actions/bill_record.dart';

// 我的 - 服务 - 钱包
class WalletPage extends StatelessWidget {
  final String title;
  const WalletPage({
    super.key,
    required this.title,
  });

  @override
  Widget build(BuildContext context) {

    return CommonPage(
      title: title,
      isShowLine: true,
      actions: const [BillRecordAction()],
      child: const WalletWidget(),
    );
  }
}

// 钱包组件
class WalletWidget extends StatelessWidget {
  const WalletWidget({super.key});

  @override
  Widget build(BuildContext context) {

    Widget extraText(String text) {
      return Padding(
        padding: const EdgeInsets.only(left: 8),
        child: Text(
          text, style:
          const TextStyle(color: Colors.orange, fontSize: 12)
        ),
      );
    }

    List mockData = [
      {
        'title': '零钱',
        'leftImgPath': 'assets/images/service/wallet/零钱.png',
        'hasBottom': false,
        'rightWidget': const Text('¥ 3.79'),
      },
      {
        'title': '零钱通',
        'leftImgPath': 'assets/images/service/wallet/零钱通.png',
        'hasBottom': false,
        'centerWidget': extraText('收益率1.29%'),
        'rightWidget': const Text('¥ 0.00'),
      },
      {
        'title': '银行卡',
        'leftImgPath': 'assets/images/service/wallet/银行卡.png',
        'hasBottom': false,
      },
      {
        'title': '亲属卡',
        'leftImgPath': 'assets/images/service/wallet/亲属卡.png',
      },
      {
        'title': '分付',
        'leftImgPath': 'assets/images/service/wallet/分付.png',
        'centerWidget': extraText('按日计息，随借随还'),
      },
      {
        'title': '数字人民币',
        'leftImgPath': 'assets/images/service/wallet/数字人民币.png',
      },
      {
        'title': '支付分',
        'leftImgPath': 'assets/images/service/wallet/支付分.png',
      },
      {
        'title': '消费者保护',
        'leftImgPath': 'assets/images/service/wallet/消费者保护.png',
      },
    ];

    TextStyle textStyle = const TextStyle(
        color: Color(0xFF5c688a),
        fontSize: 14,
        fontWeight: FontWeight.w500
    );

    return Stack(
      children: [
        Column(
            children: mockData.map((item) =>
              RouteMenuItem(
                leftImgPath: item['leftImgPath'],
                title: item['title'],
                hasBottom: item['hasBottom'] ?? true,
                onTap: item['onTap'],
                customCenterWidget: item['centerWidget'],
                customRightWidget: item['rightWidget'],
              )
            ).toList()
        ),
        Positioned(
            bottom: 20,
            left: 0,
            right: 0,
            child: SizedBox(
              width: double.infinity,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('身份信息', style: textStyle),
                    const SizedBox(
                      height: 20,
                      child: VerticalDivider(
                          color: Colors.grey, // 设置竖线颜色
                          width: 16,           // 设置竖线两侧的间距
                          thickness: 1,        // 设置竖线的粗细
                          indent: 4,          // 设置竖线上方的间距
                          endIndent: 4,       // 设置竖线下方的间距
                      ),
                    ),
                    Text('支付设置', style: textStyle),
                  ]
              ),
            )
        )
      ],
    );
  }
}
